<template>
  <div class="login">
        <el-container class="container">
            <el-header class="header">
                    <div class="nav">
                      <img src="../assets/mouse.png" alt="">
                      <h2 class="contact">MOUSE</h2>
                    </div>
                    <h4 class="title">Specialized data sets of alleles and corresponding phenotypes in genetically modified mice</h4>
            </el-header>
             <el-container>
             <el-main>
             <h2>double alleles</h2>
             </el-main>
             </el-container>
        </el-container>
  </div>
</template>

<script setup>

</script>

<style scoped>

.container{
  height: 100%;
  width: 100%;
}

.contact{
font-weight:400px;
margin-right: 20px;
text-shadow:0px 5px 9px rgba(0,0,0,.3);
color: #FBFCFD;
}

.header {
height:90px;
width:100%;
background-color:#476586;
display: flex;
}

.nav {
font-size:20px;
display: flex;
align-items: center;
}
.nav img{
margin-right: 20px;
}

.title{
color: #FBFCFD;
text-shadow: 0px 5px 9px rgba(0,0,0,.3);
margin-top: 55px;
}

</style>
